<template>
  <div id="file" @contextmenu.prevent="openFileMenu">

    <div v-if="surfix==='java'" class="file" @dblclick="handleDBClick">
      <svg-icon icon-class="java" class="icon-file"></svg-icon>
    </div>

    <div v-else-if="surfix==='py'" class="file" @dblclick="handleDBClick">
      <svg-icon icon-class="python" class="icon-file"></svg-icon>
    </div>

    <div v-else-if="surfix==='go'" class="file" @dblclick="handleDBClick">
      <svg-icon icon-class="go" class="icon-file"></svg-icon>
    </div>

    <div v-else-if="surfix==='js'" class="file" @dblclick="handleDBClick">
      <svg-icon icon-class="js" class="icon-file"></svg-icon>
    </div>

    <div v-else-if="surfix==='c' || surfix==='c++'" class="file" @dblclick="handleDBClick">
      <svg-icon icon-class="c" style="color: green" class="icon-file"></svg-icon>
    </div>


    <div v-else-if="surfix==='md'" class="file" @dblclick="handleDBClick">
      <svg-icon icon-class="md" class="icon-file"></svg-icon>
    </div>

    <div v-else-if="surfix==='txt'" class="file" @dblclick="handleDBClick">
      <svg-icon icon-class="txt" class="icon-file"></svg-icon>
    </div>

    <div v-else class="file" @dblclick="handleDBClick">
      <svg-icon icon-class="file" class="icon-file"></svg-icon>
    </div>

    <div class="fileName textEllipsis">{{ name }}</div>

<!--    <ul v-if="menuVisible" class="fimeMenu">-->
<!--      <li>aaaaa</li>-->
<!--      <li>aaaaa</li>-->
<!--      <li>aaaaa</li>-->
<!--      <li>aaaaa</li>-->
<!--    </ul>-->
  </div>
</template>

<script>
import SvgIcon from '@/components/SvgIcon/SvgIcon.vue'
import {ElMessage} from "element-plus";

export default {
  name: "File",
  components: {SvgIcon},

  props: {
    name: {
      default: "default",
      type: String,
      required: false,
    }
  },

  watch: {
    menuVisible(value) {
      if (value) {
        document.body.addEventListener('click', this.closeMenu)
      } else {
        document.body.removeEventListener('click', this.closeMenu)
      }
    }
  },


  data() {
    return {
      surfix: 'txt',
      menuVisible: false,
    }
  },

  mounted() {
    this.surfix = this.name.split('.')[1]
  },

  methods: {
    handleDBClick() {
      ElMessage({
        message: '功能尚未完善',
        type: 'warning',
        duration: 3 * 1000
      })
    },
    openFileMenu(e) {
      // this.menuVisible = true
    },
    closeMenu() {
      this.menuVisible = false
    },
    //
  }

}
</script>

<style scoped lang="scss">
#file {
  position: relative;
  width: 8rem;
  height: 8rem;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  &:hover {
    background-color: #d9eeff;

    .fileName {
      color: #000;
    }
  }
}

.file {
  width: 6rem;
  height: 6rem;
  padding: 5px;
}

.icon-file {
  width: 100%;
  height: 100%;
}

.fileName {
  width: 8rem;
  padding: 0 10px;
  color: #f3f4f7;
}

.fimeMenu {
  position: absolute;
  width: 100px;
  height: 200px;
  background-color: #fff;
  padding: 8px 0;
  border-radius: 5px;

  li {
    font-family: Sans-serif;
    text-align: left;
    color: #000;
    padding: 5px 0 5px 20px;

    &:hover {
      cursor: pointer;
      color: #fff;
      background-color: #9f9fa3;
    }
  }
}
</style>